<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div id="wave" class="wave" style="--percent: 0"></div>
  </div>

  <style>
    :root {
      --primary: rgba(154, 205, 50, .8);
      --percent: 0;
      --size: 320px;

      --rate: 2;
    }

    .container {
      position: absolute;
      width: var(--size);
      height: var(--size);
      padding: 4px;
      border: 4px solid var(--primary);
      border-radius: 50%;
      overflow: hidden;
    }

    .wave {
      position: relative;
      width: var(--size);
      height: var(--size);
      background-color: var(--primary);
      border-radius: 50%;
    }

    .wave::before,
    .wave::after {
      content: "";
      position: absolute;
      width: calc(var(--size) * var(--rate));
      height: calc(var(--size) * var(--rate));
      top: calc(0px - var(--size) * var(--rate) + var(--size) - var(--size) * var(--percent) / 100);
      left: calc(0px - var(--size) * var(--rate) / 2 + var(--size) / 2);
      /* border: 1px solid red; */
      border-radius: 45%;
      background-color: rgba(255, 255, 255, .4);
      animation: my-wave 6s linear infinite;
      z-index: 1;
    }

    .wave::after {
      border-radius: 47%;
      background-color: rgba(255, 255, 255, .9);
      animation: my-wave 10s linear -5s infinite;
      z-index: 2;
    }

    @keyframes my-wave {
      50% {
        transform: translateX(-3%) rotate(180deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

  </style>

  <script>
    const wave = document.querySelector("#wave");
    let percent = 0;
    const timer = setInterval(() => {
      if (percent < 100) {
        percent++;
        wave.style = `--percent: ${percent}`;
      } else {
        clearInterval(timer);
        // TODO: 100% 时禁用动画
      }
    }, 50);

  </script>
</body>

</html>
